<template>
  <div class="wrap">
    <div class="logo">
      <img class="logo-icon" :src="logoIcon" alt="logo" />
      <div class="name">斗罗校园</div>
    </div>
    <div class="tips" v-if="type == 1">请完成微信授权以继续使用</div>
    <button v-if="type == 1" class="btn" open-type="getUserInfo" @getuserinfo="getUserInfo">微信授权信息</button>
    <button
      v-else
      class="btn phone-btn"
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
    >手机号一键登录</button>
    <div class="footer">
      登录即代表同意
      <span>《斗罗校园用户协议》</span>
    </div>
  </div>
</template>
<script>
const logoIcon = require("@static/images/login-logo.png");
export default {
  data() {
    return {
      type: 1,
      logoIcon
    };
  },
  methods: {
    getPhoneNumber(e) {
      var that = this;
      const { encryptedData, iv } = e.target;
      that.$api
        .bindPhone({
          memberId: wx.getStorageSync("memberId"),
          openId: wx.getStorageSync("openId"),
          encryptData: encryptedData,
          iv
        })
        .then(res => {
          that.$api.getDictList().then(res => {
            that.globalData.typeDic = res.data;
          });

          if (res.code == 0) {
            wx.setStorageSync("usersig", res.data.usersig);
          }
          wx.navigateBack({
            delta: 1
          });
        });
    },
    getUserInfo(e) {
      var that = this;
      const { nickName, avatarUrl } = e.target.userInfo;

      wx.login({
        success(res) {
          if (res.code) {
            that.$api
              .loginIndex({
                code: res.code,
                nickName,
                headImgUrl: avatarUrl,
                fromMemberId: wx.getStorageSync("inviteid")
              })
              .then(res => {
                if (res.code == 0) {
                  wx.setStorageSync("usersig", res.data.usersig);
                  wx.setStorageSync("memberId", res.data.memberId);
                  wx.setStorageSync("openId", res.data.openId);
                  if (res.data.usersig && res.data.memberId) {
                    // this.timLogin(res.data.memberId, res.data.usersig);
                    wx.$app
                      .login({
                        userID: "FT_" + res.data.memberId.toString(),
                        userSig: res.data.usersig
                      })
                      .then(() => {
                        wx.$app.ready(() => {
                          wx.hideLoading();
                          let promise = wx.$app.updateMyProfile({
                            nick: nickName,
                            // allowType: wx.$app.TYPES.ALLOW_TYPE_ALLOW_ANY
                          });
                          promise
                            .then(function(imResponse) {
                              console.log('更新资料成功',imResponse.data); // 更新资料成功
                            })
                            .catch(function(imError) {
                              console.warn("updateMyProfile error:", imError); // 更新资料失败的相关信息
                            });
                          wx.$app.getMyProfile().then(res => {
                            console.log('获取资料成功',res)
                            this.$store.commit("updateMyInfo", res.data);
                          });
                        });
                      });
                  }
                  wx.navigateBack({
                    delta: 1
                  });
                } else if (res.code == 402) {
                  wx.setStorageSync("memberId", res.data.memberId);
                  wx.setStorageSync("openId", res.data.openId);
                  that.type = 2;
                }
              });
          } else {
            console.log("登录失败！" + res.errMsg);
          }
        }
      });
    },
    timLogin(memberId, usersig) {
      // console.log('memberId :',memberId);
      // console.log('usersig :',usersig);
      wx.$app.login({
        userID: "FT_" + memberId.toString(),
        userSig: usersig
      });
    }
  },

  onShow() {
    const params = this.$getQuery();
    this.type = +params.type;
  }
};
</script>
<style lang="scss" scoped>
.wrap {
  height: 100%;
  position: relative;
}
.tips {
  margin-top: 78px;
  text-align: center;
  font-size: 18px;
  color: $grey-color;
}
.btn {
  width: 308px;
  height: 45px;
  line-height: 45px;
  border-radius: 4px;
  font-size: 15px;
  color: #fff;
  background: $theme-color;
  margin: 10px auto 0px;
}
.phone-btn {
  margin-top: 78px;
}
.logo {
  text-align: center;
}
.logo-icon {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin: 30px auto 10px;
}
.name {
  font-size: 15px;
  color: $theme-color;
  text-align: center;
}
.footer {
  width: 100%;
  position: absolute;
  bottom: 30px;
  font-size: 12px;
  text-align: center;
  color: $grey-color;
  span {
    color: $theme-color;
  }
}
</style>
